<template>

  <div>

    <!--提示文字部分，为什么有这个-->
    <el-card>


      <el-alert
        title=""
        type="success"
        :closable="false"
       >
        <template>
          <div>1.由于常年不在家，相信很多人在过年时候碰到眼熟的亲戚都不知道该怎么称呼了。</div>
          <div>2.这个计算器的界面和传统的计算器没啥区别，只是选项变成了“父”、“母”、“弟”、“妹”等亲属关系。使用时用户需要先设定自己的性别，同时结算结果时还可以选择对方的年龄相比自己是年轻还是年长。</div>
          <div>3.由于工作生活节奏不同，如今很多关系稍疏远的亲戚之间来往并不多。因此放假回家过年时，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。然而搞不清亲戚关系和亲戚称谓的不仅是小孩，就连年轻一代的大人也都常常模糊混乱。</div>
          <div>4.“亲属关系计算器”为你避免了这种尴尬，只需简单的输入即可算出称谓。输入框兼容了不同的叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等，方面不同地域的习惯叫法。快捷输入按键，只需简单的点击即可完成关系输入。</div>
        </template>
      </el-alert>
    </el-card>


    <el-card class="el-card-top">

      <el-row>
        <el-col :span="24">
          <p class="title-relative">关系计算器</p>
        </el-col>
      </el-row>

      <!--关系部分-->
      <el-row>
        <el-col :span="2">
          <p>关系：</p>
        </el-col>
        <el-col :span="22">
          <el-input
            :readonly="true"
            type="textarea"
            :autosize="{ minRows: 3}"
            placeholder="注意:人物间用'的'字分开…"
            v-model.trim="calculator.textInput">
          </el-input>
        </el-col>
      </el-row>


      <div>

        <br/>

        <el-row>
          <el-col :span="24">
            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('爸爸')">父</el-button>
            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('妈妈')">母</el-button>

            <el-button :type="type" :plain="plain" :disabled="calculator.manDisabled" :size="size" @click="buttonEvent('老公')">夫</el-button>
            <el-button :type="type" :plain="plain" :disabled="calculator.womanDisabled" :size="size" @click="buttonEvent('老婆')">妻</el-button>

            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('儿子')">子</el-button>
            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('女儿')">女</el-button>

            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('哥哥')">兄</el-button>
            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('弟弟')">弟</el-button>

            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('姐姐')">姐</el-button>
            <el-button :type="type" :plain="plain" :size="size" @click="buttonEvent('妹妹')">妹</el-button>

          </el-col>
        </el-row>

        <br/>

        <el-row>
          <el-col :span="24">
            <!--选择框部分-->
            <el-button type="warning" :size="size" @click="compute">计算</el-button>
            <el-button type="warning" :size="size" @click="fallback">回退</el-button>
            <el-button type="warning" :size="size" @click="emptyData">清空</el-button>
          </el-col>
        </el-row>

        <br/>

        <el-row>
          <el-col :span="24">
            <p v-if="options.text">我应该叫 <span class="call">{{options.text}}</span> 什么?</p>
          </el-col>
        </el-row>
        <el-row>
          <!--计算结果-->
          <el-col :span="2">
            <p>计算结果：</p>
          </el-col>
          <el-col :span="22">
            <el-input
              type="textarea"
              :rows="2"
              placeholder=""
              v-model="calculator.result">
            </el-input>
          </el-col>
        </el-row>

      </div>
    </el-card>


    <!--第二个计算器-->
    <el-card class="el-card-top">

      <el-row :gutter="20">
        <el-col :span="12">

          <el-row>
            <el-col :span="24">
              <p class="title-relative">反向关系称呼计算器</p>
              <p>比如：输入“七舅姥爷”，“爷爷”,则计算出对应的人应该叫我什么。</p>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="2">
                  <p>称呼：</p>
                </el-col>
                <el-col :span="22">
                  <el-input
                    :readonly="false"
                    type="textarea"
                    :autosize="{ minRows: 3}"
                    v-model.trim="reverseRelatives">
                  </el-input>
                </el-col>
              </el-row>

              <br/>
              <el-row>
                <el-col :span="24">
                  <el-button type="warning" :size="size" @click="computeReverse">计算</el-button>
                  <el-button type="warning" :size="size" @click="clearReverse">清空</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

        </el-col>

        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <div v-if="reverseRelativesMy">
                    <span> <span class="callTitle">{{reverseRelatives}}</span> 应该叫我?</span>
                    <div class="call">
                      {{reverseRelativesMy}}
                    </div>
                  </div>
                  <br/>
                  <div v-if="reverseRelativesDetails">
                    <span class="callTitle">{{reverseRelatives}}</span> 是什么亲戚?
                    <div class="call">{{reverseRelativesDetails}}</div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>










    </el-card>




  </div>

</template>

<script>
  export default {
    // 称呼计算
    name: "AppellationCalculation",
    data(){
      return {
        // 计算器参数
        options: {
          // 最终要判断的那句话
          text:'',		// 目标对象：目标对象的称谓汉字表达，称谓间用‘的’字分隔
          target:'',	    	// 相对对象：相对对象的称谓汉字表达，称谓间用‘的’字分隔，空表示自己
          sex: -1,			// 本人性别：0表示女性,1表示男性
          type:'default',		// 转换类型：'default'计算称谓,'chain'计算关系链,'pair'计算关系合称
          reverse:false,		// 称呼方式：true对方称呼我,false我称呼对方
          mode:'default',		// 模式选择：使用setMode方法定制不同地区模式，在此选择自定义模式
          optimal:false,       	// 最短关系：计算两者之间的最短关系
        },
        // 输入框大小
        size: 'mini',
        // 是否朴素按钮
        plain: false,
        // 按钮类型
        type: 'primary',
        // 亲戚关系计算器
        calculator: {
          // 点击后文字写入的位置
          textInput: '',
          // 男性禁用,默认自己的性别是男性，所以这里默认是禁用
          manDisabled: true,
          // 女性禁用
          womanDisabled: null,
          // 结果
          result: null,
        },
        // 反向亲戚称呼
        reverseRelatives: '',
        // 反向亲戚应该称呼我什么
        reverseRelativesMy: '',
        // 反向亲戚的是一个什么亲戚
        reverseRelativesDetails: '',
      }
    },
    methods: {
      /**
       * 清空数据
       */
      clearReverse(){
        this.reverseRelatives = ''
        this.reverseRelativesMy = ''
        this.reverseRelativesDetails = ''
      },
      /**
       * 反向关系计算
       */
      computeReverse(){
        // 先清空
        this.reverseRelativesMy = ''
        this.reverseRelativesDetails = ''

        if (this.reverseRelatives){
          let relationship = require("relationship.js");
          let call = this.reverseRelatives
          // console.log(call)
          // 对方称呼我
          let my = relationship({text: call, reverse:true, sex: 1});
          if (my.length){
            for (let i = 0; i < my.length; i ++){
              this.reverseRelativesMy += my[i] + "\n"
            }
          }

          // 获取 XX是什么亲戚
          let res = relationship({text: call, type:'chain'});
          if (res.length){
            for (let i = 0; i < res.length; i ++){
              this.reverseRelativesDetails += res[i] + "\n"
            }
          }
        }
      },
      /**
       * 计算亲戚关系
       */
      compute(){
        let relationship = require("relationship.js");
        // 其实没必要这么
        this.options.text = this.calculator.textInput
        // 重置
        this.calculator.result = ''
        // let resultTxt = relationship({text: textInput});
        let resultTxt = relationship(this.options);
        if (resultTxt.length){
          for (let i = 0; i < resultTxt.length; i ++){
            this.calculator.result += resultTxt[i] + "\n"
          }
        } else {
          this.calculator.result = "貌似他/她跟你不是很熟哦!"
        }
      },
      /**
       * 回退
       */
      fallback(){
        let textInput = this.calculator.textInput
        let index = textInput.lastIndexOf(' 的 ');
        index = Math.max(0, index);
        this.calculator.textInput = textInput.substr(0, index);
        this.calculator.result = '';
        this.calculator.manDisabled = false;
        this.calculator.womanDisabled = false;
      },
      /**
       * 按钮被点击事件
       * @param value 该按钮带的默认值
       */
      buttonEvent(value){
        if (this.calculator.textInput){
          this.calculator.textInput = this.calculator.textInput + '的' + value
        } else {
          this.calculator.textInput = value
        }

        if ('爸爸,老公,儿子,哥哥,弟弟'.indexOf(value) > -1){
          this.calculator.manDisabled = true
          this.calculator.womanDisabled = false
        } else {
          this.calculator.manDisabled = false
          this.calculator.womanDisabled = true
        }

        // 开始计算
        this.compute()
      },
      /**
       * 清空数据
       */
      emptyData(){
        this.calculator.textInput = '';
        this.calculator.result = '';
        this.calculator.manDisabled = false;
        this.calculator.womanDisabled = false;
      },
    },
    mounted(){
    },
  }
</script>

<style scoped>

  /*亲戚的关系标题*/
  .title-relative{
    font-weight:600;
    font-size: 16px;
  }

  .el-card-top {
    margin-top: 10px
  }

  .call {
    color: red;
    font-weight:600;
    font-size: 16px;
  }

  .callTitle {
    color: #4E83FD;
    font-weight:600;
    font-size: 16px;
  }

</style>
